import React from 'react'
import A from './Recipe.module.css'
import sushi from '../../image/sushi.png'
import roushi from '../../image/roushi.png'
import tang from '../../image/tang.png'
import jiachang from '../../image/jiachang.png'
import zaocan from '../../image/zaocan.png'
import wucan from '../../image/wucan.png'
import xiawucha from '../../image/xiawucha.png'
import wancan from '../../image/wancan.png'
import chaofan from '../../image/chaofan.png'
import mifan from '../../image/mifan.png'
import baozi from '../../image/baozi.png'
import jiaozi from '../../image/jiaozi.png'
import chuan from '../../image/chuan.png'
import lu from '../../image/lu.png'
import yue from '../../image/yue.png'
import mincai from '../../image/mincai.png'
import jing from '../../image/jing.png'
import hu from '../../image/hu.png'     
import yu from '../../image/yu.png'
import dongbei from '../../image/dongbei.png'
import zhou from '../../image/zhou.png'
import bing from '../../image/bing.png'
import binggan from '../../image/饼干.png'
import mianbao from '../../image/面包.png'

function Recipe() {
  return (
    <div className={A.zong}>
        <h1>全部菜谱分类</h1>
        <div className={A.shiyong}>
            <div className={A.shiyong_title}>实用分类</div>
            <div className={A.shiyong_bottom}>
                <div className={A.shiyong_item}>
                    <img src={sushi} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>素食</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={roushi} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>肉食</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={tang} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>汤</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={jiachang} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>家常菜</div>
                </div>
            </div>
    
        </div>

        <div className={A.shiyong}>
            <div className={A.shiyong_title}>每日三餐</div>
            <div className={A.shiyong_bottom}>
                <div className={A.shiyong_item}>
                    <img src={zaocan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>早餐</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={wucan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>午餐</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={xiawucha} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>下午茶</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={wancan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>晚餐</div>
                </div>
            </div>
    
        </div>
        <div className={A.shiyong}>
            <div className={A.shiyong_title}>主食分类</div>
            <div className={A.shiyong_bottom}>
                <div className={A.shiyong_item}>
                    <img src={chaofan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>炒饭</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={mifan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>米饭</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={baozi} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>包子</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={jiaozi} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>饺子</div>
                </div>
                
                <div className={A.shiyong_item}>
                    <img src={bing} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>饼</div>
                </div>
                
                <div className={A.shiyong_item}>
                    <img src={zhou} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>粥</div>
                </div>
            </div>
        </div>
        <div className={A.shiyong}>
            <div className={A.shiyong_title}>中华菜系</div>
            <div className={A.shiyong_bottom}>
                <div className={A.shiyong_item}>
                    <img src={chuan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>川菜</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={lu} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>鲁菜</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={yue} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>粤菜</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={yu} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>豫菜</div>
                </div>
                <div className={A.shiyong_item}>
                    <img src={mincai} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>闽菜</div>
                </div>         
                <div className={A.shiyong_item}>
                    <img src={dongbei} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>东北菜</div>
                </div>     
                <div className={A.shiyong_item}>
                    <img src={jing} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>京菜</div>
                </div>  
                <div className={A.shiyong_item}>
                    <img src={hu} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>沪菜</div>
                </div>


            </div>
        </div>

        <div className={A.shiyong}>
            <div className={A.shiyong_title}>甜品</div>
            <div className={A.shiyong_bottom}>
                <div className={A.shiyong_item}>
                    <img src={binggan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>饼干</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={mianbao} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>面包</div>
                </div>

                <div className={A.shiyong_item}>
                    <img src={binggan} className={A.shiyong_img}></img>
                    <div className={A.shiyong_text}>蛋糕</div>
                </div>



            </div>
        </div>

    </div>
  )
}

export default Recipe